<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  msg: String,
})

// 计数器状态
const count = ref(0)

// 待办事项状态
const todos = ref([])
const newTodo = ref('')

// 计时器状态
const timer = ref(0)
const isTimerRunning = ref(false)
const timerRecords = ref([])
let timerInterval = null

// 计算属性
const completedTodos = computed(() => {
  return todos.value.filter(todo => todo.completed).length
})

// 方法
const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      completed: false
    })
    newTodo.value = ''
  }
}

const toggleTodo = (todo) => {
  todo.completed = !todo.completed
}

const deleteTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id !== id)
}

const toggleTimer = () => {
  if (isTimerRunning.value) {
    clearInterval(timerInterval)
  } else {
    timerInterval = setInterval(() => {
      timer.value++
    }, 1000)
  }
  isTimerRunning.value = !isTimerRunning.value
}

const resetTimer = () => {
  if (timer.value > 0) {
    // 保存当前记录
    timerRecords.value.unshift({
      id: Date.now(),
      duration: timer.value,
      date: new Date().toLocaleString()
    })
  }
  clearInterval(timerInterval)
  timer.value = 0
  isTimerRunning.value = false
}

const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

const deleteTimerRecord = (id) => {
  timerRecords.value = timerRecords.value.filter(record => record.id !== id)
}

// 生命周期钩子
onUnmounted(() => {
  if (timerInterval) {
    clearInterval(timerInterval)
  }
})
</script>

<template>
  <div class="container">
    <h1 class="title">{{ msg }}</h1>

    <div class="dashboard">
      <div class="card counter-card">
        <h2>计数器</h2>
        <div class="counter">
          <button class="btn" @click="count--">-</button>
          <span class="count">{{ count }}</span>
          <button class="btn" @click="count++">+</button>
        </div>
      </div>

      <div class="card timer-card">
        <h2>计时器</h2>
        <div class="timer">
          <span class="time">{{ formatTime(timer) }}</span>
          <div class="timer-controls">
            <button class="btn" @click="toggleTimer">
              {{ isTimerRunning ? '暂停' : '开始' }}
            </button>
            <button class="btn reset-btn" @click="resetTimer">重置</button>
          </div>
        </div>
        <div class="timer-records" v-if="timerRecords.length > 0">
          <h3>计时记录</h3>
          <div class="record-list">
            <div v-for="record in timerRecords" :key="record.id" class="record-item">
              <div class="record-info">
                <span class="record-time">{{ formatTime(record.duration) }}</span>
                <span class="record-date">{{ record.date }}</span>
              </div>
              <button class="btn delete-btn" @click="deleteTimerRecord(record.id)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card todo-card">
      <h2>待办事项</h2>
      <div class="todo-input">
        <input 
          v-model="newTodo" 
          @keyup.enter="addTodo"
          placeholder="添加新的待办事项..."
          class="input"
        >
        <button class="btn" @click="addTodo">添加</button>
      </div>
      <div class="todo-list">
        <div 
          v-for="todo in todos" 
          :key="todo.id"
          class="todo-item"
          :class="{ completed: todo.completed }"
        >
          <input 
            type="checkbox" 
            :checked="todo.completed"
            @change="toggleTodo(todo)"
          >
          <span class="todo-text">{{ todo.text }}</span>
          <button class="btn delete-btn" @click="deleteTodo(todo.id)">删除</button>
        </div>
      </div>
      <div class="todo-stats">
        已完成: {{ completedTodos }} / {{ todos.length }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

.title {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.5rem;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.counter-card, .timer-card {
  text-align: center;
}

.counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.count {
  font-size: 2rem;
  font-weight: bold;
  color: #2c3e50;
}

.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.time {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2c3e50;
}

.todo-card {
  margin-top: 2rem;
}

.todo-input {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}

.btn {
  background: #42b883;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn:hover {
  background: #3aa876;
}

.delete-btn {
  background: #ff4757;
}

.delete-btn:hover {
  background: #ff6b81;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: #888;
}

.todo-text {
  flex: 1;
}

.todo-stats {
  margin-top: 1rem;
  text-align: right;
  color: #666;
}

h2 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.timer-controls {
  display: flex;
  gap: 0.5rem;
}

.reset-btn {
  background: #e74c3c;
}

.reset-btn:hover {
  background: #c0392b;
}

.timer-records {
  margin-top: 1.5rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.timer-records h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.record-list {
  max-height: 200px;
  overflow-y: auto;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-bottom: 1px solid #eee;
}

.record-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.record-time {
  font-weight: bold;
  color: #2c3e50;
}

.record-date {
  font-size: 0.8rem;
  color: #666;
}
</style>
